<template>
  <div class="about">
    <van-nav-bar
  title="购物车"
  left-arrow
  @click-left="onClickLeft"
/>
<section>
      <van-checkbox-group v-model="result">
        <van-row class="aa" v-for="(item, index) in list" :key="index">
          <van-col class="ss" span="3">
            <van-checkbox :name="item" @click="Multiple"></van-checkbox>
          </van-col>
          <van-col span="21">
            <van-card
              :price="item.item.salePrice"
              :title="item.item.productName"
              :thumb="item.item.productImage"
            >
              <template #num>
                <van-stepper
                  v-model="item.num"
                  theme="round"
                  button-size="22"
                  disable-input
                  @change="liang"
                />
              </template>
            </van-card>
          </van-col>
        </van-row>
      </van-checkbox-group>
    </section>
    <footer>
      <van-submit-bar :price="js" button-text="提交订单">
        <van-checkbox v-model="check" @click="qx">全选</van-checkbox>
      </van-submit-bar>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      
    }
  },
  computed: {
    list() {
      return this.$store.state.cart;
    },
    result: {
      get() {
        return this.$store.state.result;
      },
      set(v) {
        this.$store.commit("changeMy", v);
      }
    },
    check: {
      get() {
        return this.$store.state.check;
      },
      set(v) {
        this.$store.commit("che", v);
      }
    },
    js() {
      return this.$store.state.js;
    },
    shu() {
      return this.$store.state.liang;
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    liang() {
      this.$store.commit("js");
      localStorage.cart = JSON.stringify(this.$store.state.cart);
    },
    Multiple() {
      this.$store.dispatch("CART_D");
      this.$store.commit("js");
    },
    qx() {
      this.$store.commit("qx");
      this.$store.commit("js");
    },
  },
}
</script>
<style scoped>
  section {
  margin-bottom: 60px;
}
.aa {
  margin: 10px;
}
.ss {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
</style>
